<template>
  <div class="modal">
    <el-dialog
      v-model="dialogVisible"
      :title="info.title ? info.title : getTitle()"
      width="60%"
      @close="closeDialog"
    >
      <div v-html="info.content"></div>
      <template #footer>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">{{ btnText }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { articleList } from "@/api/other";

const props = defineProps({
  // 是否显示
  show: {
    type: Boolean,
    default: false,
  },
  // 协议类型
  type: {
    type: String,
    default: "CLOUD_MARKET_USER_AGREEMENT",
  },
  btnText: {
    type: String,
    default: "同 意",
  }
});
const emits = defineEmits(["update:show", "confirm"]);
const dialogVisible = computed(() => props.show); // 控制弹窗显示
const info = ref<any>({});

// 关闭弹窗
const closeDialog = () => {
  emits("update:show", false);
};

watch(props, (val) => {
  if (val.show) {
    getAgreement();
  }
});

//协议标题
const getTitle = () => {
  if ('USER_AGREEMENT' == props.type) {
    return '用户协议';
  } else if ('PRIVACY_AGREEMENT' == props.type) {
    return '隐私协议';
  }
}

// 获取协议信息
const getAgreement = () => {
  articleList({
    type: props.type,
  }).then((res: any) => {
    info.value = res.rows[0];
  });
};

// 提交订单
const handleConfirm = () => {
  emits("confirm");
  closeDialog();
};
</script>

<style lang="less" scoped></style>
